<template>
    <div>
        <el-dialog title="选择转化目标" :visible.sync="SeletTarget" width="600px" class="target-main" center
            @close="$emit('update:targetshow', false)" :close-on-click-modal="false" v-loading="loading" :targetshow="targetshow">
            <el-row type="flex" align="middle">
                <span class="convert-span">转化跟踪方式：</span>
                <el-radio-group size="small" v-model="convert_type"  @change="changeConvertType">
                    <el-radio-button v-for="item in convertList" :key="item.convert_type" :label="item.convert_type" :disabled="item.disabled">{{getConvertName(item.convert_type)}}</el-radio-button>
                    <!-- <el-radio-button label="1">线索通</el-radio-button> -->
                    <!-- <el-radio-button disabled label="2">JS布码</el-radio-button> -->
                </el-radio-group>
            </el-row>
            <el-row type="flex" align="middle" class="convert-goal">
                <span class="convert-span">转化目标：</span>根据当前填写投放内容，识别出以下可用转化目标：
            </el-row>
            <el-row type="flex" align="middle" class="convert-goal">
                <span class="convert-span"></span>
                <div class="convert-goal-list">
                    <el-radio-group v-model="selectAction" @change="changeTop" class="convert_wrap">
                        <el-radio v-for="(act,index) in actions" :label="act.external_name" :key="index"
                            class="goal_radio">
                            <el-row type="flex" justify="space-between" class="convert-goal-item">
                                <span class="convert-goal-item-title">{{act.external_name}}</span>
                                <span class="convert-goal-item-right">{{act.category}}</span>
                            </el-row>
                            <el-row class="convert-goal-item-desc">{{act.desc}}</el-row>
                            <div class="deep-convert-goal" v-show="act.isshow">
                                <div class="deep-convert-goal-title">选择深度转化目标</div>
                                <el-radio-group v-model="selectDeepAction" class="deep_wrap">
                                    <el-radio v-for="deep in act.deep_external_actions" :label="deep.convert_id" :key="deep.deep_external_action"
                                    :disabled="deep.disabled"
                                        class="deep_radio">{{deep.deep_external_name}}</el-radio>
                                </el-radio-group>
                            </div>
                        </el-radio>
                    </el-radio-group>
                </div>
            </el-row>
            <el-row type="flex" align="middle" justify="center" style="margin-top: 25px;">
                <el-button @click="SeletTarget = false">取 消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </el-row>
        </el-dialog>
    </div>
</template>
<style>
    .convert-goal {
        margin-top: 20px;
    }

    .convert-span {
        width: 110px;
        display: inline-block;
        text-align: right;
    }

    .convert-goal-list {
        border: 1px solid #dadfe3;
        border-radius: 4px;
        max-height: 371px;
        width: 414px;
        overflow-y: auto;
        display: block;
    }

    .convert_wrap {
        width: 100%;
    }

    .convert_wrap .el-radio.goal_radio {
        width: 100%;
        padding: 17px 10px 12px 16px;
        display: flex;
        margin-right: 0;
        border-top: 1px solid #dadfe3;
    }

    .convert_wrap .el-radio.goal_radio:first-child {
        border-top: none;
    }

    .convert_wrap .el-radio.goal_radio .el-radio__label {
        width: 100%;
    }

    .convert-goal-item {
        width: 100%;
        font-size: 14px;
    }

    .convert-goal-item-title {
        color: #555;
    }

    .convert-goal-item-right {
        color: #999;
    }

    .convert-goal-item-desc {
        font-size: 12px;
        color: #999;
        line-height: 20px;
        margin-top: 4px;
    }

    .deep-convert-goal {
        align-items: center;
        justify-content: space-between;
        /* padding: 16px 40px 10px 40px; */
        padding: 8px 0 0 0;
        margin-top: 8px;
        border-top: 1px solid #dadfe3;
    }

    .deep-convert-goal-title {
        font-size: 14px;
        color: #999;
        padding: 5px 0 10px 0;
    }

    .deep_wrap .el-radio.deep_radio {
        width: 50%;
        float: left;
        padding: 6px 4px;
        margin: 0 0 4px 0;
    }
</style>
<script>
const AD_TYPES = {
    'AD_CONVERT_TYPE_PHONE':1,//电话拨打
'AD_CONVERT_TYPE_FORM':2,//表单提交
'AD_CONVERT_TYPE_MAP_SEARCH':3,//地图搜索
'AD_CONVERT_TYPE_DOWNLOAD_FINISH':4,//下载完成
'AD_CONVERT_TYPE_BUTTON':5,//按钮button
'AD_CONVERT_TYPE_XPATH':6,//xpath类型转换
'AD_CONVERT_TYPE_VIEW':7,//关键页面浏览
'AD_CONVERT_TYPE_ACTIVE':8,//激活
'AD_CONVERT_TYPE_DOWNLOAD_START':9,//下载按钮download_start
'AD_CONVERT_TYPE_QQ':10,//qq咨询
'AD_CONVERT_TYPE_LOTTERY':11,//抽奖
'AD_CONVERT_TYPE_VOTE':12,//投票
'AD_CONVERT_TYPE_ACTIVE_REGISTER':13,//激活且注册
'AD_CONVERT_TYPE_PAY':14,//激活且付费
'AD_CONVERT_TYPE_INSTALL_FINISH':15,//安装完成
'AD_CONVERT_TYPE_PHONE_CONFIRM':16,//智能电话-确认拨打
'AD_CONVERT_TYPE_PHONE_CONNECT':17,//智能电话-确认接通
'AD_CONVERT_TYPE_PHONE_EFFECTIVE':18,//智能电话-有效接通
'AD_CONVERT_TYPE_CONSULT_EFFECTIVE':19,//有效咨询
'AD_CONVERT_TYPE_APP_ORDER':20,//app内下单
'AD_CONVERT_TYPE_APP_UV':21,//app内访问
'AD_CONVERT_TYPE_APP_CART':22,//app内添加购物车
'AD_CONVERT_TYPE_APP_PAY':23,//app内付费
'AD_CONVERT_TYPE_SALES_LEAD':24,//销售线索
'AD_CONVERT_TYPE_GAME_ADDICTION':25,//关键行为（原深度转化）
'AD_CONVERT_TYPE_CUSTOMER_EFFECTIVE':26,//有效获客
'AD_CONVERT_TYPE_EFFECTIVE_COPY':27,//关键页面到达&有效内容复制
'AD_CONVERT_TYPE_COUPON':28,//卡券领取
'AD_CONVERT_TYPE_APP_DETAIL_UV':29,//app内详情页到站uv
'AD_CONVERT_TYPE_RSS':30,//账号关注
'AD_CONVERT_TYPE_FORM_CONNECT':31,//表单提交-已接通
'AD_CONVERT_TYPE_FORM_ANSWER':32,//有效沟通
'AD_CONVERT_TYPE_DIALBACK':33,//提交回呼电话
'AD_CONVERT_TYPE_DIALBACK_CONFIRM':34,//回呼电话-确认拨打
'AD_CONVERT_TYPE_DIALBACK_CONNECT':35,//回呼电话-确认接通
'AD_CONVERT_TYPE_FORM_DEEP':36,//分层表单
'AD_CONVERT_TYPE_UPDATE_LEVEL':37,//激活且升级
'AD_CONVERT_TYPE_CREATE_GAMEROLE':38,//激活且创建角色
'AD_CONVERT_TYPE_NEXT_DAY_OPEN':39,//激活且次留
'AD_CONVERT_TYPE_INVALID_CLUE':40,//无效线索
'AD_CONVERT_TYPE_INTENTION_CLUE':41,//有意向客户
'AD_CONVERT_TYPE_HIGH_VALUE_CLUE':42,//高价值客户
'AD_CONVERT_TYPE_PAID_CLUE':43,//已成单
'AD_CONVERT_TYPE_NATIVE_ACTION':44,//原生互动
'AD_CONVERT_TYPE_LIKE_ACTION':45,//视频点赞
'AD_CONVERT_TYPE_FOLLOW_ACTION':46,//关注
'AD_CONVERT_TYPE_COMMENT_ACTION':47,//视频评论
'AD_CONVERT_TYPE_LOCATION_ACTION':48,//POI点击
'AD_CONVERT_TYPE_SHOPPING_ACTION':49,//购物车点击
'AD_CONVERT_TYPE_REDIRECT_TO_SHOP':50,//调起店铺
'AD_CONVERT_TYPE_LINK_ACTION':51,//link点击
'AD_CONVERT_TYPE_DEEP_PURCHASE':52,//多次付费
'AD_CONVERT_TYPE_SUCCESSORDER_ACTION':53,//小店转化
'AD_CONVERT_TYPE_POI_COLLECT':60,//poi地址点击
'AD_CONVERT_TYPE_POI_ADDRESS_CLICK':61,//poi收藏
'AD_CONVERT_TYPE_RESERVATION':62,//poi预定
'AD_CONVERT_TYPE_MESSAGE_ACTION':63,//私信消息
'AD_CONVERT_TYPE_SHARE_ACTION':65,//分享
'AD_CONVERT_TYPE_CLICK_LANDING_PAGE':66,//访问推广详情页
'AD_CONVERT_TYPE_CLICK_SHOPWINDOW':67,//访问主页商品橱窗
'AD_CONVERT_TYPE_CLICK_DOWNLOAD':68,//访问主页下载应用
'AD_CONVERT_TYPE_CLICK_CALL_DY':69,//点击主页内电话拨打
'AD_CONVERT_TYPE_CLICK_WEBSITE':70,//访问主页官网
'AD_CONVERT_PAGE_VIEW':93,//访问目标页面
'AD_CONVERT_TYPE_MESSAGE':94,//短信
'AD_CONVERT_TYPE_REDIRECT':95,//页面跳转
'AD_CONVERT_TYPE_SHOPPING':96,//商品购买
'AD_CONVERT_TYPE_CONSULT':97,//在线咨询
'AD_CONVERT_TYPE_WECHAT':98,//微信
'AD_CONVERT_TYPE_OTHER':99,//其他
'AD_CONVERT_TYPE_MULTIPLE':100,//多转化事件
'AD_CONVERT_TYPE_POI_MULTIPLE':101,//POI门店多转化目标
'AD_CONVERT_TYPE_MULTI_NATIVE_ACTION':102,//互动
'AD_CONVERT_TYPE_LOAN_COMPLETION':103,//互联网金融-完件
'AD_CONVERT_TYPE_PRE_LOAN_CREDIT':104,//互联网金融-预授信
'AD_CONVERT_TYPE_LOAN_CREDIT':105,//互联网金融-授信
'AD_CONVERT_TYPE_IDCARD_INFORMATION':106,//身份证信息填写完成
'AD_CONVERT_TYPE_BANKCARD_INFORMATION':107,//银行卡信息填写完成
'AD_CONVERT_TYPE_PERSONAL_INFORMATION':108,//补充个人信息填写完成
'AD_CONVERT_TYPE_CERTIFICATION_INFORMATION':109,//用户活体认证信息上传完成
'AD_CONVERT_TYPE_LT_ROI':110,//广告变现ROI
'AD_CONVERT_TYPE_LIVE_HOMEPAGE':111,//直播导流
'AD_CONVERT_TYPE_REDIRECT_TO_STORE':113,//店铺导流
'AD_CONVERT_TYPE_FEED_LIVE_HOMEPAGE':120,//火山feed进入直播页
'AD_CONVERT_TYPE_AUTHORIZATION':121,//授权
'AD_CONVERT_TYPE_COMMODITY_CLICK':122,//快上电商推广目的
'AD_CONVERT_TYPE_CONSULT_CLUE':123,//留咨咨询
'AD_CONVERT_TYPE_BOOST':124,//自然助推
'AD_CONVERT_TYPE_STAY_TIME':125,//店铺停留
'AD_CONVERT_TYPE_PURCHASE_OF_GOODS':156,//商品签收
'AD_CONVERT_TYPE_PURCHASE_ROI':160,//付费ROI
'AD_CONVERT_TYPE_LIVE_NATIVE_ACITON':162,//直播间原生互动
'AD_CONVERT_TYPE_LIVE_FOLLOW_ACITON':163,//直播间加粉
'AD_CONVERT_TYPE_LIVE_COMMENT_ACTION':164,//直播间评论
'AD_CONVERT_TYPE_LIVE_GIFT_ACTION':165,//直播间内打赏
'AD_CONVERT_TYPE_LIVE_SLIDECART_CLICK_ACTION':166,//直播间查看购物车
'AD_CONVERT_TYPE_LIVE_CLICK_PRODUCT_ACTION':167,//直播间商品按钮点击
'AD_CONVERT_TYPE_LIVE_ENTER_ACTION':171,//直播间观看
'AD_CONVERT_TYPE_LIVE_SUCCESSORDER_ACTION':172,//直播间成单
'AD_CONVERT_TYPE_NOTIFY_DOWNLOAD':173,//预约下载
'AD_CONVERT_TYPE_PREMIUM_PAYMENT':174,//保险支付
'AD_CONVERT_TYPE_MESSAGE_CLICK':177,//私信点击
'AD_CONVERT_TYPE_UG_ROI':178,//内广roi
'AD_CONVERT_TYPE_ENTER_HOMEPAGE':181,//进入个人主页
'AD_CONVERT_TYPE_SHOPPING_CART':182,//商品购物车点击
'AD_CONVERT_TYPE_WECHAT_REGISTER':183,//微信内注册
'AD_CONVERT_TYPE_WECHAT_PAY':184,//微信内付费
'AD_CONVERT_TYPE_MESSAGE_INTERACTION':185,//沟通互动
'AD_CONVERT_TYPE_LIVE_STAY_TIME':186,//直播间停留
'AD_CONVERT_TYPE_NEW_FOLLOW_ACTION':187,//粉丝增长
'AD_CONVERT_TYPE_APPLET_CLICK':189,//小程序互动
'AD_CONVERT_TYPE_MESSAGE_SERVICE':190,//私信服务
'AD_CONVERT_TYPE_MESSAGE_CLUE':192,//私信留资
'AD_CONVERT_TYPE_LIVE_FANS_ACTION':193,//直播间加入粉丝团
'AD_CONVERT_TYPE_CLUE_CONFIRM':194,//回访_信息确认
'AD_CONVERT_TYPE_CLUE_INTERFLOW':195,//回访_加为好友
'AD_CONVERT_TYPE_CLUE_HIGH_INTENTION':196,//回访_高潜成交
'AD_CONVERT_TYPE_LIVE_COMPONENT_CLICK':215,//组件点击
}
    export default {
        name: 'TargetPicker',
        model: {
            prop: 'data',
            event: 'change'
        },
        props: {
            targetshow: {
                type: Boolean,
                default: false
            },
            url: {
                type: String,
                default: '',
            },
            advertiser_id: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                // advertiser_id: 0,
                SeletTarget: this.targetshow,
                loading: false,
                convertList: [],
                convert_type: '',
                actions: [],
                selectAction: 0,
                selectDeepAction: 0,
                RadioShow: false,
                converts: [{
                        id: 1,
                        title: '多转换目标',
                        desc: '使用智能电话-确认接通、表单提交共同实现线索收集的目标',
                        deeptitle: '选择深度转化目标',
                        category:'落地页',
                        isshow: true,
                        deeps: [{
                                id: 1,
                                title: '无'
                            },
                            {
                                id: 2,
                                title: '回访-信息确认'
                            },
                            {
                                id: 3,
                                title: '回访-加为好友'
                            },
                            {
                                id: 4,
                                title: '回访-高潜成交'
                            }
                        ]
                    },
                    {
                        id: 2,
                        title: '表单提交',
                        category:'落地页',
                        isshow:false
                    }
                ]
            }
        },
        watch: {
            targetshow() {
                this.SeletTarget = this.targetshow
                if (this.SeletTarget) {
                    // console.log('=====',  this.url)
                    this.loadData(this.url)
                }
            }
        },
        methods: {
            loadData(url) {
                this.loading = true
                let param = {code: this.advertiser_id, url: url}
                this.$axios.get('/adconvert', param).then(e => {
                    this.loading = false
                    // console.log(e)
                    // let idx = 0
                    e.data.list.forEach(ele => {
                        // ele.id = idx
                        if (ele.external_actions) {
                            ele.external_actions.forEach(e => {
                                e.isshow = false
                                if (e.external_action && !e.convert_id) {
                                    e.convert_id = AD_TYPES[e.external_action]
                                }
                                
                                if (e.deep_external_actions) {
                                    e.deep_external_actions.forEach(e2 => {
                                        e2.parent_convert_id = e.convert_id
                                        if (e2.deep_external_action) {
                                            e2.convert_id = AD_TYPES[e2.deep_external_action]
                                        }
                                    })
                                    // if (e.deep_external_actions.length > 0) {
                                    //     e.deep_external_actions.splice(0, 0, {convert_id: 0, deep_external_name:'无', deep_external_action:'',disabled:false, parent_convert_id: e.convert_id})
                                    //     // e.isshow = true
                                    // }
                                }
                            })
                        }
                    })
                    this.convertList = e.data.list
                    if (this.convertList.length > 0) {
                        this.convert_type = this.convertList[0].convert_type
                        this.changeConvertType()
                    }
                    // console.log('this.convertList', this.convertList)
                })
            },
            changeConvertType() {
                // console.log('changeConvertType', this.convert_type)
                let item = this.convertList.find(ele => {
                    return ele.convert_type == this.convert_type
                })
                this.actions = item.external_actions
                // for (let i = 0; i < this.actions.length; i++) {
                //     const e = this.actions[i];
                    
                // }
                // 选中第一项
                if (this.actions.length > 0) {
                    this.selectAction = this.actions[0].external_name
                    this.changeTop()
                } else {
                    this.selectAction = 0
                }
                // console.log('action', this.actions)
            },
            changeTop() {
                // console.log('changeTop', this.selectAction)
                for (let i = 0; i < this.actions.length; i++) {
                    const e = this.actions[i];
                    e.isshow = false
                }
                let idx = this.actions.findIndex(e => {
                    return e.external_name == this.selectAction
                })
                if (this.actions[idx].deep_external_actions && this.actions[idx].deep_external_actions.length > 0) {
                    this.actions[idx].isshow = true
                }
            },
            getConvertName(type) {
                switch (type) {
                    case 'AD_CONVERT_SOURCE_TYPE_INTERNAL':
                        return '线索通'
                    case 'AD_CONVERT_SOURCE_TYPE_JS':
                        return 'JS布码'
                    case 'AD_CONVERT_SOURCE_TYPE_XPATH':
                        return 'XPATH'
                    case 'AD_CONVERT_SOURCE_TYPE_H5_API':
                        return '落地页API（H5）'
                    default:
                        return '未知'
                }
            },
            submit() {
                this.SeletTarget = false
                // 
                let obj = this.actions.find(e => {
                    return e.external_name == this.selectAction
                })
                let data = {
                    convert_id: obj.convert_id,
                    convert_name: obj.external_name,
                    convert_deep_id: this.selectDeepAction
                }
                console.log('submit', data)
                this.$emit('change', data)
            }
        }
    }
</script>
